<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	var passwordFlag=false;
	var idFlag=false;
	var nickFlag=false;
		$("#passwordCheck").keyup(function(){
			if($("#pass").val().length!=0){
				if($("#pass").length==$(this).length){
					if($("#pass").val()==$(this).val()){
						$("#check").html("사용가능");
						passwordFlag=true;
					}else{
						$("#check").html("패스워드가 틀립니다");
						passwordFlag=false;
					}
				}else{
					passwordFlag=false;
				}
			}
		});
		$("#pass").change(function(){
			if($("#passwordCheck").val().length!=0){
				if($("#passwordCheck").length==$(this).length){
					if($("#passwordCheck").val()==$(this).val()){
						$("#check").html("사용가능");
						passwordFlag=true;
					}else{
						$("#check").html("패스워드가 틀립니다");
						passwordFlag=false;
					}
				}else{
					passwordFlag=false;
				}
			}
		});
		$("#id").keyup(function(){
			$.ajax({
				type:"post",
				url:"member_ajaxIdCheck.do",
				dataType:"json",
				data:"id="+$(this).val(),
				success:function(jsonData){
					if(jsonData=="true"){
						$("#idcheck").html("사용가능");
						idFlag=true;
					}else{
						$("#idcheck").html("아이디 중복");
						idFlag=false;
					}
				}
			});
		});
		$("#nick").keyup(function(){
			$.ajax({
				type:"post",
				url:"member_ajaxNickCheck.do",
				dataType:"json",
				data:"nick="+$(this).val(),
				success:function(jsonData){
					if(jsonData=="true"){
						$("#nickcheck").html("사용가능");
						nickFlag=true;
					}else{
						$("#nickcheck").html("닉네임 중복");
						nickFlag=false;
					}
				}
			});
		});
		$("#registerForm").submit(function(){
			if($("#id").val()=="" | $("#address").val()=="" | $("#passwordCheck").val()=="" |$("#pass").val()=="" |$("#name").val()=="" |$("#nick").val()==""){
				alert("빈공간이 있습니다.");
				return false;
			}else if(idFlag==false){
				alert("아이디가 중복됩니다");
				return false;
			}else if(nickFlag==false){
				alert("닉네임이 중복됩니다");
				return false;
			}else if(passwordFlag==false){
				alert("패스워드와 확인이 다릅니다.");
				return false;
			}
		});
	});
</script>
<style type="text/css">
.CSSTableRegister {
	margin:0px;padding:0px;
	width:45%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableRegister table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableRegister tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableRegister table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableRegister table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableRegister tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableRegister tr:hover td{
	background-color:#ffffff;
		

}
.CSSTableRegister td{
	vertical-align:middle;
	background:-o-linear-gradient(bottom, #ffffff 5%, #ffffff 100%);	
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff) ); 
	background:-moz-linear-gradient( center top, #ffffff 5%, #ffffff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff");
	background: -o-linear-gradient(top,#ffffff,ffffff);

	background-color:#ffffff;

	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:12px;
	font-family:Arial;
	font-weight:bold;
	color:#000000;
}
.CSSTableRegister tr:last-child td{
	border-width:0px 1px 0px 0px;
}
.CSSTableRegister tr td:last-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableRegister tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableRegister tr:first-child td{
	background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
	background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");	
	background: -o-linear-gradient(top,#cccccc,b2b2b2);

	background-color:#cccccc;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#000000;
}
.CSSTableRegister tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
	background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");	background: -o-linear-gradient(top,#cccccc,b2b2b2);

	background-color:#cccccc;
}
.CSSTableRegister tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableRegister tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

.registerBtn {
	font-size:12px;
	font-family:Verdana;
	font-weight:bold;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #dcdcdc;
	padding:5px 10px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #d9d5d9), color-stop(100%, #bababa) );
	background:-moz-linear-gradient( center top, #d9d5d9 5%, #bababa 100% );
	background:-ms-linear-gradient( top, #d9d5d9 5%, #bababa 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9d5d9', endColorstr='#bababa');
	background-color:#d9d5d9;
	color:#4f4f4f;
	display:inline-block;
	text-shadow:0px 0px 0px #ffffff;
 	-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
 	-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
 	box-shadow:inset 0px 0px 0px 0px #ffffff;
}.registerBtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #bababa), color-stop(100%, #d9d5d9) );
	background:-moz-linear-gradient( center top, #bababa 5%, #d9d5d9 100% );
	background:-ms-linear-gradient( top, #bababa 5%, #d9d5d9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#d9d5d9');
	background-color:#bababa;
}.registerBtn:active {
	position:relative;
	top:1px;
}
</style>
</head>
<body>
<center>
<form action="member_registerMember.do" method="post" id="registerForm">
<br><br>
<table class="CSSTableRegister">
<tr>
	<td colspan="2"  align="center"width="300">회원가입</td>
</tr>
<tr>
	<td>아이디</td><td width="250"><input type="text" id="id" name="id" size="10"><span id="idcheck"></span></td>
</tr>
<tr>
	<td>패스워드</td><td><input type="password" id="pass" name="password" size="10"><span id="check"></span></td>
</tr>
<tr>
	<td>패스워드 확인</td><td><input type="password" id="passwordCheck" name="passwordCheck" size="10"></td>
</tr>
<tr>
	<td>닉네임</td><td><input type="text" id="nick" name="nick" size="10"><span id="nickcheck"></span></td>
</tr>
<tr>
	<td>이름</td><td><input type="text" id="name" name="name"></td>
</tr>
<tr>
	<td>주소</td><td><input type="text" id="address" name="address"></td>
</tr>
</table>
<br>
<input type="submit" class="registerBtn" value="회원가입" id="registerBtn">
<input type="reset" value="reset" id="resetBtn" class="registerBtn">
</form>
</center>
</body>
</html>